<template>
    <div class="invitation-code-page">
       <div>
           <el-form>
               <!-- <el-form-item label="推广员：">
                    <el-input placeholder="请输入推广员" v-model="searchForm.productId" size="small" clearable></el-input>
               </el-form-item> -->
               <el-form-item label="店铺名称：">
                   <el-select v-model="searchForm.shopName" placeholder="请输入店铺名称" size="small">
                        <el-option  label="全部" value=""></el-option>
                        <el-option v-for="(item, index) in shopNameList" :key="index" :label="item.name" :value="item.name"></el-option>
                   </el-select>
               </el-form-item>
               <el-form-item label="店铺类型：">
                   <el-select v-model="searchForm.platformType" placeholder="请选择类型" size="small">
                        <el-option  label="全部" value=""></el-option>
                        <el-option v-for="(item, index) in platformTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
                   </el-select>
               </el-form-item>
                <el-form-item label="任务开始时间 ：">
                <div class="block">
                  <el-date-picker   size="small" @change="changeTime" v-model="searchTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </div>
              </el-form-item>
               <el-form-item>
                   <el-button class="search-btn" @click="searchData()">查&nbsp;&nbsp;询</el-button>
               </el-form-item>

           </el-form>
       </div>
       <div>
           <el-table :data="tableData" border :default-sort = "{prop: 'date', order: 'descending'}" show-summary  :summary-method="getSummaries">
               <el-table-column prop="date_info" sortable label="时间"></el-table-column>
               <!-- <el-table-column prop="product_id" label="商品ID"></el-table-column> -->
               <el-table-column prop="phone" label="商户号"></el-table-column>
               <el-table-column prop="promoter_phone" label="推广员"></el-table-column>
               <el-table-column prop="platform_type_name" label="店铺类型"></el-table-column>
               <el-table-column prop="shop_name" label="店铺名称"></el-table-column>
               <el-table-column prop="all_num" label="任务总数"></el-table-column>
               <el-table-column prop="wait_num" label="等待执行"></el-table-column>
               <el-table-column prop="wait_get_num" label="等待操作"></el-table-column>
               <el-table-column prop="real_num"  label="正在操作"></el-table-column>
               <el-table-column prop="success_num" label="执行成功"></el-table-column>
               <el-table-column prop="execution_fail_num" label="执行失败"></el-table-column>
               <el-table-column prop="merchant_fail_num"  label="商家终止"></el-table-column>
               <el-table-column prop="person_fail_num"  label="人工终止"></el-table-column>
               <el-table-column prop="over_fail_num"  label="超时终止"></el-table-column>
               <el-table-column prop="create_num"  label="创建中"></el-table-column>

           </el-table>
            <!-- <div class="block" style="margin: 20px 0px; text-align: right;">
            	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page"
            	 :page-sizes="[10, 15, 20, 25]" :page-size="searchForm.limit" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"></el-pagination>
            </div> -->
       </div>
    </div>

</template>
<script>
import {apiShopHistoryDataList,apiGetAllShopList} from '../../request/api'
    export default {
        data(){
            return {
                tableData:[],
                searchForm: {
                    token: window.sessionStorage.getItem("token"),
                    productId: '',
                    platformType: '',
                    shopName: '',
                    createTime: '',
                    promoterPhone: ''
                },
                storeType: [
                {
                    label: '淘宝',
                    value: 1
                },
                {
                    label: '天猫',
                    value: 2
                },
                {
                    label: '京东',
                    value: 3
                },
				{
				    label: '1688',
				    value: 4
				},
                {
                    label: '唯品会',
                    value: 13
                },
                {
                    label: '拼多多',
                    value: 15
                }
                ],
                pickerOptions: {
                    disabledDate(time) {
                        let merchantTime = window.sessionStorage.getItem('merchantTime')
                        let curDate = (new Date()).getTime();
                        let three = merchantTime * 24 * 3600 * 1000;
                        let threeMonths = curDate - three;
                        return time.getTime() < threeMonths;
                    },
                },
                searchTime: [],
                shopNameList: [],
                platformTypeList: [],
                shopTypeList: window.sessionStorage.getItem("shopTypeList"),
            }
        },
        created () {
            this.getTableData()
            this.getAllShopList()
            if(!this.shopTypeList || this.shopTypeList == null){
              this.platformTypeList = this.storeType
            } else {
              let shopShowTypeArr = this.shopTypeList.split(',')
              for(var i in this.storeType){
                if(shopShowTypeArr.indexOf(this.storeType[i].value.toString()) >=0) {
                  this.platformTypeList.push(this.storeType[i])
                }
              }
            }
        },
        methods:{
          getAllShopList (){
              apiGetAllShopList({
                token: window.sessionStorage.getItem("token"),
              }).then(res =>{
                if(res.code == 1){
                  this.shopNameList = res.msg
                }
              }).catch(res => {
                this.$message.error('数据加载失败')
              })
          },
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '总计';
                    return;
                }
                 if (index ===1) {
                    sums[index] = '';
                    return;
                }
                if (index ===2) {
                    sums[index] = '';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                        return prev + curr;
                    } else {
                        return prev;
                    }
                    }, 0);
                    sums[index];
                } else {
                    sums[index] = '';
                }
                });

                return sums;
            },
            getTableData (){
                this.$showLoading()
                apiShopHistoryDataList(this.searchForm).then(res =>{
                    this.tableData = res.data
                    this.$hideLoading()
                }).catch(res => {
                  this.$hideLoading()
                  this.$message.error('数据加载失败')
                })
            },

            searchData(){
                if(!this.searchForm.shopName){
                  this.$message.error('店铺名称不能为空')
                  return
                }
                this.getTableData()
            },
            changeTime(val){
                if (this.searchTime == null) {
                     this.searchForm.createTime = ''
                } else{
                    this.searchForm.createTime =  this.changeTimestamp(val[0]) + ' - ' +  this.changeTimestamp(val[1])

                }
            },
            changeTimestamp(time){
                var d = new Date(time);
                var s = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
                // return new Date(s).getTime() /1000;
                return s
            },
        }
    }
</script>
<style lang="less" scoped>
@import '../../assets/css/common.css';
</style>
